<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>P{{ problem.id }} 提交评测</title>
	{% include "../header.html" %}
	<style>
		#editor {
			height: 600px;
			font-size: 18px;
			margin: 0;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}
	</style>
</head>

<body>
	{% include "../nav.html" %}
	<div class="row" style="margin: 3% 8% 5% 8%">
		<div class="col-md-6">
			<div class="card">
				<div class="card-body">
					<h4>提交评测</h4>
					<select class="custom-select" style="width:200px" id="language" name="language"
						onChange="reloadtemplate($(this).val());">
						<option value=0>
							C
						</option>
						<option value=1 selected>
							C++
						</option>
						<option value=3>
							Java
						</option>
						<option value=6>
							Python
						</option>
						<option value=7>
							PHP
						</option>
						<option value=9>
							C#
						</option>
						<option value=16>
							JavaScript
						</option>
						<option value=17>
							Go
						</option>
						<option value=18>
							SQL(sqlite3)
						</option>
					</select>
				</div>
			</div>
			<br>
			<div class="card">
				<div class="card-body">
					<h4>P{{ problem.id }} {{ problem.problem_title }}</h4>
					<hr />
					<span id="problemInfo">
						{% autoescape off %}
						{{ problem.problem_info }}
						{% endautoescape %}
					</span>
				</div>
			</div>
			<br>
		</div>
		<div class="col-md-6">
			<div class="card" id="editorBox" class="position: absolute;">
				<div class="card-body">
					<div id="editor"></div>
				</div>
			</div>
		</div>
	</div>
	{% include "../footer.html" %}
	<script>
		function switchLang(lang) {
			var langnames = new Array("c_cpp", "c_cpp", "pascal", "java", "ruby", "sh", "python", "php", "perl", "csharp", "objectivec", "vbscript", "scheme", "c_cpp", "c_cpp", "lua", "javascript", "golang");
			editor.getSession().setMode("ace/mode/" + langnames[lang]);

		}
		function reloadtemplate(lang) {
			console.log("lang=" + lang);
			document.cookie = "lastlang=" + lang.value;
			//alert(document.cookie);
			var url = window.location.href;
			var i = url.indexOf("sid=");
			if (i != -1) url = url.substring(0, i - 1);
			//  if(confirm("是否加载默认模板?\n 如果选择是，当前代码将被覆盖!"))
			//       document.location.href=url;
			switchLang(lang);
		}
		ace.require("ace/ext/language_tools");
		var editor = ace.edit("editor");
		editor.setTheme("ace/theme/tomorrow");
		switchLang(6);
		editor.setOptions({
			enableBasicAutocompletion: true,
			enableSnippets: true,
			enableLiveAutocompletion: true
		});
		reloadtemplate($("#language").val());
		window.onscroll = function () {
			var sl = -Math.max(document.body.scrollTop, document.documentElement.scrollTop);
			document.getElementById('editorBox').style.bottom = sl + 'px';
			var sl = -Math.max(document.body.scrollLeft, document.documentElement.scrollLeft);
			document.getElementById('navbar').style.left = sl + 'px';
		}
	</script>
</body>

</html>